<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>	A Centred Company</title>
<style type="text/css">
	html,body{
		margin:0px;
		padding:0px;
		height: 100%;	
	}
	body{
		background:#fc3;
		font-family: Georgia,Times,serifs;	
	}
	#floater{
		#position: relative;
		float: left;
		height: 50%;
		margin-bottom: -200px;
		width: 50px;	
		#border:1px solid red;
	}
	#centered{
		position: relative;
		clear: left;
		height: 400px;
		width: 80%;
		max-width: 800px;
		min-width: 400px;
		margin:0 auto;
		background:#fff;
		border:4px solid #666;	
	}
	#bottom{
		position: absolute;
		bottom: 0;
		right: 0;	
	}
	#nav{
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 70%;
		padding:20px;
		margin:10px;	
	}
	#content{
		position: absolute;
		left: 30%;
		right: 0;
		top: 0;
		bottom: 0;
		overflow: auto;
		height: 340px;
		padding:20px;
		margin:10px;	
	}
	ul#nav{
		list-style:none;
		padding:0px;
		margin:20px 0 0 0;	
		text-indent: 0;
	}
	#nav li{
		padding:0;
		margin:3px;
	}
	#nav li a{
		display: block;
		background-color: #e8e8e8;
		padding:7px;
		margin:0;
		text-decoration: none;
		color: #000;
		border-bottom: 1px solid #bbb;
		text-align: right;	
	}
	#nav li a:after{
		content: '>>';
		color: #aaa;
		font-weight: bold;
		display: inline;
		float: right;
		margin:0 2px 0 5px;	
	}
	#nav li a:hover,#nav li a:focus{
		background:#f8f8f8;
		border-bottom-color: #777;	
	}
	#nav li a:hover:after{
		margin:0 0 0 7px;
		color: #f93;
	}
	#nav li a:active{
		padding:8px 7px 6px 7px;	
	}
</style>
</head>
<body>
	<div id="floater">
	</div>
	<div id="centered">
		<div id="side">
			<div id="logo">
				<strong><span>A</span> Company</strong>
			</div>
				<ul id="nav">
					<li><a href="#">Home</a></li>
					<li><a href="#">Products</a></li>
					<li><a href="#">Blog</a></li>
					<li><a href="#">Contact</a></li>
					<li><a href="#">About</a></li>
				</ul>
			</div>
			
			<div id="content">
				<h1>Page Title</h1>
					Holisticly re-engineer value-added outsourcing after process-centric collaboration 
					and idea-sharing.Energistically simplify impactful niche markets via enabled 
					imperatives.Holisticly predominate premium innovation after compelling scenarios.
					Seamlessly recaptiualize high standards in human capital with leading-edge 
					manufactured products.Distinctively syndicate standards compliant schemas before
					 robust vortals.Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box
					  information.
				<h2>Heading 2</h2>
						Efficiently embrace customized web-readiness rather than customer directed 
						processes.Assertively grow cross-platform imperatives vis-a-vis proactive 
						technologies.Conveniently empower multidisciplinary meta-services without 
						enterprise-wide interfaces.Conveniently streamline competitive strategic theme 
						areas with focused e-markets.Phosfluorescently syndicate world-class communities
						 vis-a-vis value-added markets.Appropriately reinvent holistic services before 
						 robust e-services.
				</div>
		</div>
		<div id="bottom">
			Copyright notice goes here
		</div>
	</body>
</html>